<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: homePath }">项目/建筑管理</el-breadcrumb-item>
          <el-breadcrumb-item>查看项目</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <div class="info-content">
          <el-row :gutter="10">
            <!--<el-col :span="6">项目编号：{{ projectData.projectId }}</el-col>-->
            <el-col :span="8">项目名称：{{ projectData.name }}</el-col>
            <el-col :span="8">项目状态：{{ projectData.state | stateFil }}</el-col>
            <el-col :span="8">项目描述：{{ projectData.description }}</el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8"><label v-html="nbsp"></label>创建者：{{ creatorData.displayName }}</el-col>
            <el-col :span="8">创建时间：{{ formatDateFun(projectData.createTime) }}</el-col>
            <el-col :span="8">更新时间：{{ formatDateFun(projectData.updateTime) }}</el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card class="m-t">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="项目建筑" name="build">
          <build :projectData="projectData" :building="building" :address="address"></build>
        </el-tab-pane>
        <el-tab-pane label="项目设备" name="device">
          <device></device>
        </el-tab-pane>
        <el-tab-pane label="项目成员" name="member">
          <member></member>
        </el-tab-pane>
        <el-tab-pane label="已删除设备" name="removeDevice">
          <remove-device></remove-device>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import build from "./components/build/index.vue";
import device from "./components/device/index.vue";
import removeDevice from "./components/device/removeDevice.vue";
import member from "./components/member/index.vue";
import { get } from "@/api/projectManage";
import { formatDate } from "@/utils/utils";
export default {
  components: {
    build,
    device,
    member,
    removeDevice
  },
  data() {
    return {
      nbsp: '&emsp;',
      activeName: "build",
      projectId: 0,
      projectData: {},
      creatorData: {},
      building: {
        type: "",
        climateZone: "",
        greenLevel: ""
      },
      address: {
        province: {
          areaCode: "" // 省直辖市代码，代码见地址相关 API
        },
        city: {
          areaCode: "" // 城市代码
        },
        county: {
          areaCode: "" // 区代码
        },
        detailAddress: "" // 具体地址，字符串类型
      },
      homePath:"/projectManage"
    };
  },
  mounted() {
    this.projectId = this.$route.query.projectId;
    this.page = this.$route.query.page;
    this.search = this.$route.query.search;
    this.homePath = `${this.homePath}?page=${this.page}&search=${this.search}`
    this.getData();
  },
  filters: {
    stateFil(val) {
      switch (val) {
        case "ACTIVE":
          return "正常";
        case "DISABLE":
          return "结束";
        default:
          break;
      }
    }
  },
  methods: {
    formatDateFun(value) {
      return formatDate(new Date(value));
    },
    tabClick() {},
    getData() {
      var data = {
        projectId: this.projectId
      };
      get(data).then(res => {
        this.projectData = res.value;
        this.creatorData = res.value.creator;
        if (this.projectData.building != null) {
          this.building = this.projectData.building;

        }
        if (this.projectData.address != null) {
          this.address = this.projectData.address;
        }
      });
    }
  }
};
</script>
<style>
.info-content {
  line-height: 30px;
  font-size: 14px;
}
</style>
